import { useState, useEffect } from 'react'

import './index.less'

const Loading = (props: any) => {

  // 原子加载
  const atomSpinner = () => {
    return <div className='atom-spinner'>
      <div className='spinner-inner'>
        <div className='spinner-line'></div>
        <div className='spinner-line'></div>
        <div className='spinner-line'></div>
        <div className='spinner-circle'>
          &#9679;
        </div>
      </div>
    </div>
  }

  //
  const scalingSquaresSpinner = () => {
    return <div className='scaling-squares-spinner'>
      <div className='square'></div>
      <div className='square'></div>
      <div className='square'></div>
      <div className='square'></div>
    </div>
  }

  const selfBuildingSquareSpinner = () => {
    return <div className='self-building-square-spinner'>
      <div className='square'></div>
      <div className='square'></div>
      <div className='square'></div>
      <div className='square clear'></div>
      <div className='square'></div>
      <div className='square'></div>
      <div className='square clear'></div>
      <div className='square'></div>
      <div className='square'></div>
    </div>
  }

  const loopingRhombusesSpinner = () => {
    return <div className="looping-rhombuses-spinner">
      <div className="rhombus"></div>
      <div className="rhombus"></div>
      <div className="rhombus"></div>
    </div>
  }

  const dotLoading1 = () => {
    return <div className="dot-loader1"></div>
  }

  const dotLoading2 = () => {
    return <div className="dot-loader2"></div>
  }

  const dotLoading3 = () => {
    return <div className="dot-loader3"></div>
  }

  const dotLoading4 = () => {
    return <div className="dot-loader4"></div>
  }

  const dotLoading5 = () => {
    return <div className="dot-loader5"></div>
  }

  const circleSpinner1 = () => {
    return <div className="circle-spinner1"></div>
  }

  const shapesSpinner1 = () => {
    return <div className="shapes-spinner1"></div>
  }

  const shapesSpinner2 = () => {
    return <div className="shapes-spinner2"></div>
  }

  const shapesSpinner3 = () => {
    return <div className="shapes-spinner3"></div>
  }

  const shapesSpinner4 = () => {
    return <div className="shapes-spinner4"></div>
  }

  const shapesSpinner5 = () => {
    return <div className="shapes-spinner5"></div>
  }

  const shapesSpinner6 = () => {
    return <div className="shapes-spinner6"></div>
  }

  const progressLoader1 = () => {
    return <div className="progress-loader1"></div>
  }

  const progressLoader2 = () => {
    return <div className="progress-loader2"></div>
  }

  const progressLoader3 = () => {
    return <div className="progress-loader3"></div>
  }

  const progressLoader4 = () => {
    return <div className="progress-loader4"></div>
  }

  const wobblingLoader1 = () => {
    return <div className="wobbling-loader1"></div>
  }

  const wobblingLoader2 = () => {
    return <div className="wobbling-loader2"></div>
  }

  const infiniteLoader1 = () => {
    return <div className="infinite-loader1"></div>
  }

  const infiniteLoader2 = () => {
    return <div className="infinite-loader2"></div>
  }

  const infiniteLoader3 = () => {
    return <div className="infinite-loader3"></div>
  }

  const infiniteLoader4 = () => {
    return <div className="infinite-loader4"></div>
  }

  const flippingLoader1 = () => {
    return <div className="flipping-loader1"></div>
  }

  const flippingLoader2 = () => {
    return <div className="flipping-loader2"></div>
  }

  const continuousSpinner1 = () => {
    return <div className="continuous-spinner1"></div>
  }

  const continuousSpinner2 = () => {
    return <div className="continuous-spinner2"></div>
  }

  const plusingLoader1 = () => {
    return <div className="plusing-loader1"></div>
  }

  const hungryLoader1 = () => {
    return <div className="hungry-loader1"></div>
  }

  const hungryLoader2 = () => {
    return <div className="hungry-loader2"></div>
  }

  const clonesLoader1 = () => {
    return <div className="clones-loader1"></div>
  }

  const clonesLoader2 = () => {
    return <div className="clones-loader2"></div>
  }

  const qiaoqiaobanLoader = () => {
    return <div className="qiaoqiaoban-loader"></div>
  }

  const loadingList = [
    atomSpinner,
    scalingSquaresSpinner,
    selfBuildingSquareSpinner,
    loopingRhombusesSpinner,
    dotLoading1,
    dotLoading2,
    dotLoading3,
    dotLoading4,
    dotLoading5,
    circleSpinner1,
    shapesSpinner1,
    shapesSpinner2,
    shapesSpinner3,
    shapesSpinner4,
    shapesSpinner5,
    shapesSpinner6,
    progressLoader1,
    progressLoader2,
    progressLoader3,
    progressLoader4,
    wobblingLoader1,
    wobblingLoader2,
    infiniteLoader1,
    infiniteLoader2,
    infiniteLoader3,
    infiniteLoader4,
    flippingLoader1,
    flippingLoader2,
    continuousSpinner1,
    continuousSpinner2,
    plusingLoader1,
    hungryLoader1,
    hungryLoader2,
    clonesLoader1,
    clonesLoader2,
    qiaoqiaobanLoader,
  ]

  return <div className='loading'>
    {loadingList[0]()}
  </div>
}

export default Loading
